<script setup>
import {ref,onMounted,defineProps} from "vue"

const props = defineProps({
     fan1Url:{type:String},
     fan2Url:{type:String},
     fan3Url:{type:String},
     fan4Url:{type:String},
     fan5Url:{type:String},
     fan6Url:{type:String},
     fan7Url:{type:String},
     fan8Url:{type:String},
     fan9Url:{type:String},
     fan10Url:{type:String},
     fan11Url:{type:String},
     fan12Url:{type:String},
})

onMounted()

</script>

<template>
    <div class="fanJi1_all">
        <div class="titleBox"></div>
        <div class="ji1_6">
            <div v-if="props.fan1Url != ''"></div>
            <div v-if="props.fan2Url != ''"></div>
            <div v-if="props.fan3Url != ''"></div>
            <div v-if="props.fan4Url != ''"></div>
            <div v-if="props.fan5Url != ''"></div>
            <div v-if="props.fan6Url != ''"></div>
        </div>
        <div class="ji7_12">
            <div v-if="props.fan7Url != ''"></div>
            <div v-if="props.fan8Url != ''"></div>
            <div v-if="props.fan9Url != ''"></div>
            <div v-if="props.fan10Url != ''"></div>
            <div v-if="props.fan11Url != ''"></div>
            <div v-if="props.fan12Url != ''"></div>
        </div>
    </div>
</template>

<style scoped>
.fanJi1_all{
    position: absolute;
    left: 71%;
    top: 25%;
    width: 28.5%;
    height: 40%;
    background: rgba(200, 200, 200, 1);
    border-radius: 15px;
}
.titleBox{
    width: 100%;
    height: 20%;
}
.ji1_6{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    /* background-color: red; */
}
.ji1_6 div{
    margin-left: 10px;
}
.ji7_12{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    /* background-color: skyblue; */
}
.ji7_12 div{
    margin-left: 10px;
}
</style>